<template>
  <div class="profile-form">
    <h3>👤 基本信息</h3>
    <div class="form-group">
      <label for="username">用户名</label>
      <input id="username" type="text" v-model="form.username" disabled />
    </div>
    <div class="form-group">
      <label for="realName">真实姓名</label>
      <input id="realName" type="text" v-model="form.realName" />
    </div>
    <div class="form-group">
      <label for="gender">性别</label>
      <select id="gender" v-model="form.gender">
        <option value="MALE">男</option>
        <option value="FEMALE">女</option>
      </select>
    </div>
    <div class="form-group">
      <label for="birthDate">生日</label>
      <input id="birthDate" type="date" v-model="form.birthDate" />
    </div>
    <div class="form-group">
      <label for="phone">手机号码</label>
      <input id="phone" type="text" v-model="form.phone" />
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input id="email" type="email" v-model="form.email" />
    </div>
    <div class="form-group">
      <label for="address">住址</label>
      <input id="address" type="text" v-model="form.address" />
    </div>
    <div class="form-group">
      <div class="form-actions">
        <button @click="save">保存信息</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { getUserInfo, updateUser } from '@/api/user'

const form = reactive({
  username: 'testuser',
  realName: '',
  gender: 'MALE',
  birthDate: '',
  phone: '',
  email: '',
  address: ''
})

async function fetchUserInfo() {
  try {
    const res = await getUserInfo()
    Object.assign(form, res)
  } catch (err) {
    console.error('加载用户信息失败：', err.message)
  }
}

// 在组件挂载时请求用户信息
onMounted(() => {
  fetchUserInfo()
})

async function save() {
  try {
    // 可选：简单验证（比如不能为空）
    if (!form.realName || !form.phone || !form.email) {
      alert('请填写完整信息')
      return
    }
    const res = updateUser(form)
    alert('信息保存成功')
  } catch (err) {
    console.error('保存信息失败：', err.message)
    alert('保存失败：' + err.message)
  }
}
</script>

<style scoped>
.profile-form {
  width: 100%;
  min-width: 600px;
  box-sizing: border-box;
  color : #000;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.form-group label {
  width: 100px;
  margin-right: 10px;
  font-weight: bold;
  white-space: nowrap;
  color: #000;
}

.form-group input,
.form-group select {
  flex: 1;
  padding: 0.4em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;              /* 添加这一行，确保占满宽度 */
  margin-top: 2em;
}

button {
  background-color: #1890ff;
  color: #fff;
  padding: 0.6em 1.2em;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #40a9ff;
}

button:active {
  background-color: #096dd9;
}

</style>

